<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import axios from 'axios';
import { dividerProps } from 'element-plus';
import { ArrowDown } from '@element-plus/icons-vue'
import { h } from 'vue'
import { ElNotification } from 'element-plus'
const methods = {
	str : '',
	str1 : '',
	str2 : '',
	onSubmit: async () => {
		state.load = true
		state.firstA = ""
		state.before = ""
		state.after = ""

		ElNotification({
			title: '提示',
			message: h('i', { style: 'color: teal' }, '程序已经开始运行,请耐心等待20秒左右'),
			duration: 0,
		})

		const { data } = await axios.post('/myapi/api/statr', {
			"domain": state.form.Domain,
			"ip": state.form.Ip,
			"fakeip": state.form.FakeIp,
			"ttl": state.form.TTL
		})
		methods.str = data.output.split("gqx")[0]
		state.firstA = methods.str
		state.before = data.output.split("gqx")[1].split('iptables added\niptables removed\n\nSent 1 packets.\n\n')[0]
		state.after = data.output.split("gqx")[1].split('iptables added\niptables removed\n\nSent 1 packets.\n\n')[1]
		state.load = false
	}
};

const state = reactive({
	form: {
		Ip: '192.168.50.3',
		Domain: 'dnssec-secflaw-spoof.com',
		FakeIp: '1.2.3.4',
		TTL: '100',
	} ,
    buttonText: '开始攻击',
	buttonStyle: { backgroundColor: ''},
	isAttacking: false,
	firstA: '',
	before:'',
	after:'',
	load:false,
});
</script>

<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }" class="bread">主页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/DNSSEC' }" class="bread">DNSSEC</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/DNSSEC' }" class="bread">DNSSEC解析器域名解析数据欺骗功能</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
	<div style="display: flex;">

		<div style="width: 50%;">
			<div class="display-flex j-c-c a-i-c height100">
				<div class="login-form">
					<h1 class="title">信息输入</h1>
					<el-form :model="state.form" label-width="100px">
						<el-form-item prop="email" label="内部靶机的IP">
							<el-input v-model="state.form.Ip" disabled></el-input>
						</el-form-item>
						<el-form-item prop="email" label="域名">
							<el-input v-model="state.form.Domain" ></el-input>
						</el-form-item> 
						<el-form-item prop="email" label="伪造的IP">
							<el-input v-model="state.form.FakeIp"></el-input>
						</el-form-item>
						<el-form-item prop="email" label="TTL">
							<el-input v-model="state.form.TTL"></el-input>
						</el-form-item>
					</el-form>
					<el-form-item class="button-container">
						<el-button class="Mybutton" type="primary" @click="methods.onSubmit"
							:style="{ backgroundColor: state.buttonStyle.backgroundColor }">
							{{ state.buttonText }}
						</el-button>
					</el-form-item>
				</div>
			</div>
			<div v-loading="state.load">
				<el-form :inline="true" class="display-flex j-c-c a-i-c height100">
					<div class="login-form">
						<el-form-item>
							<h1 class="title">DNSSEC检测信息</h1>
							<el-input placeholder="DNSSEC检测" clearable :rows="15"
								:autosize="{ minRows: 10, maxRows: 10 }" readonly="true" class="OutputBox"
								type="textarea" v-model="state.firstA" />
						</el-form-item>
					</div>
				</el-form>

				<el-form :inline="true" class="demo-form-inline">
					<el-form-item class="login-form2">
						<h3 class="title">原始DNS检测记录</h3>
						<el-input placeholder="原始DNS检测记录" clearable :rows="15" :autosize="{ minRows: 10, maxRows: 10 }"
							readonly="true" v-model="state.before" class="OutputBox" type="textarea" />
					</el-form-item>
					<el-form-item class="login-form2">
						<h3 class="title">攻击后DNS检测记录</h3>
						<el-input placeholder="攻击后DNS检测记录" clearable :rows="15" :autosize="{ minRows: 10, maxRows: 10 }"
							readonly="true" class="OutputBox" type="textarea" v-model="state.after" />
					</el-form-item>
				</el-form>
			</div>

		</div>
		<div style="width: 40%;">
			<img src="@/assets/dnssec.png" alt="tsinghua" style="width: 100%; height: auto;">
		</div>
	</div>



</template>


<style lang="css" scoped>
.login-form {
	width: 400px;
	height: 300px;
	margin: 0 auto;
	margin-top: 10px;
	padding: 30px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.login-form2 {
	width: 400px;
	height: 320px;
	margin: 0 auto;
	padding: 30px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.OutputBox {
	width: 400px;
	height: 220px;

	padding: 0px;
	margin-top: 30px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.Output {
	position: relative;
	height: 200px;
	
	margin-top: 2px;
}

.code-box {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}

.Output {
	position: relative;
	margin-top: 10px;
}

.Mybutton {
	text-align: center;
	margin: 0 auto;
	
}

.button-container {
  margin-top: 20px; /* 增加按钮与上方的距离 */
  text-align: center; /* 使按钮居中对齐 */
}

.bread {
    font-size: 34px;
}
</style>